<template>
  <div class="container">
    <div class="profile-header">
      <img :src="user.avatar" alt="用户头像" class="avatar">
      <div class="user-info">
        <div class="nickname">{{ user.nickname }}</div>
        <div class="user-id">ID: {{ user.id }}</div>
        <div class="user-rating">
          <div class="star-text">信用星级：</div>
          <span 
            v-for="i in 5" 
            :key="i" 
            class="star" 
            :class="{ filled: i <= user.rating }"
          >★</span>
          <span class="rating-text">{{ user.rating.toFixed(1) }}</span>
        </div>
      </div>
    </div>

    <div class="profile-menu">
      <div 
        v-for="item in menuItems" 
        :key="item.id" 
        class="menu-item" 
        @click="navigateTo(item.id)"
      >
        <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
        </svg>
        <span class="menu-text">{{ item.text }}</span>
        <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </div>

    <button class="logout-btn" @click="logout">退出登录</button>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      user: {
        avatar: 'https://via.placeholder.com/80',
        nickname: '二手交易达人',
        id: '12345678',
        rating: 4 // 1-5星评价
      },
      menuItems: [
        {
          id: 'my-posts',
          text: '我的发布',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
        },
        {
          id: 'my-favorites',
          text: '我的收藏',
          icon: 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'
        },
        {
          id: 'browse-history',
          text: '浏览历史',
          icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
        },
        {
          id: 'edit-profile',
          text: '资料修改',
          icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
        }
      ]
    }
  },
  methods: {
    navigateTo(page) {
      const pageNames = {
        'my-posts': '我的发布',
        'my-favorites': '我的收藏',
        'browse-history': '浏览历史',
        'edit-profile': '资料修改'
      };
      alert(`即将跳转到${pageNames[page] || page}页面`);
      // 实际项目中替换为以下代码：
      // this.$router.push(`/${page}`);
    },
    logout() {
      if (confirm('确定要退出登录吗？')) {
        alert('退出登录成功');
        // 实际项目中替换为以下代码：
        // this.$router.push('/login');
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
  border: 2px solid #f0f0f0;
}

.user-info {
  flex: 1;
}

.nickname {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-id {
  color: #999;
  font-size: 14px;
}

.profile-menu {
  background-color: #fff;
  border-radius: 10px;
  padding: 0 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.menu-item {
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: #f9f9f9;
}

.menu-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
  color: #ff6b6b;
}

.menu-text {
  flex: 1;
  font-size: 16px;
}

.arrow {
  width: 16px;
  height: 16px;
  color: #ccc;
}

.logout-btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #ff5252;
}

.user-rating {
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.star {
  color: #ccc;
  font-size: 16px;
  margin-right: 2px;
}

.star.filled {
  color: #ffb400;
}

.star-text {
  margin-left: 5px;
  font-size: 14px;
  color: #666;
}

.rating-text {
  margin-left: 5px;
  font-size: 14px;
  color: #666;
}
</style>